import React, { useEffect, useState } from "react";
import { Card, Table, Button, Popconfirm, message } from "antd";
import { getAllBrand, delBrand } from "../../../services";
export const List = (props) => {
  const [dataSource, setDataSource] = useState([]);
  const [total, setTotal] = useState(0);

  useEffect(() => {
    // 这里相当于vue的created
    getAll(1);
  }, []);
  // 初始数据
  const getAll = (page) => {
    getAllBrand({ page, pageSize: 10, shopId: 489 }).then((res) => {
      console.log(res);
      setDataSource(res.data.list);
      setTotal(res.data.total);
    });
  };
  // 翻页
  const loadData = (page) => {
    console.log(page);
    getAll(page);
  };
  // react的table里面可以直接用render
  const columns = [
    {
      title: "序号",
      key: "id",
      width: 80,
      align: "center",
      render: (tex, record, index) => index + 1,
    },
    {
      title: "品牌名称",
      dataIndex: "brandName",
    },
    {
      title: "启用状态",
      dataIndex: "stateName",
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
    },
    {
      title: "操作",
      render: (txt, record, index) => {
        return (
          <div>
            <Button type="primary" size="small">
              修改
            </Button>
            <Popconfirm
              title="确定删除此项"
              onCancel={() => {
                console.log("取消");
              }}
              onConfirm={() => {
                console.log("删除");
                // 逻辑操作
                console.log(txt, record, index);
                delBrand({
                  brandId: txt.brandId,
                  id: txt.id,
                }).then((res) => {
                  if (res.code == "0") {
                    message.success("删除成功");
                    getAll(1);
                  }
                });
              }}
            >
              <Button style={{ margin: "0 1rem" }} type="danger" size="small">
                删除
              </Button>
            </Popconfirm>
          </div>
        );
      },
    },
  ];
  return (
    <Card
      title="列表"
      extra={
        <Button
          type="primary"
          size="small"
          onClick={() => props.history.push("/admin/edit")}
        >
          新增
        </Button>
      }
    >
      <Table
        columns={columns}
        bordered
        dataSource={dataSource}
        rowKey={(record) => record.id}
        pagination={{ total, onChange: loadData }}
      />
    </Card>
  );
};

export default List;
